<template>
	<div class="app-container">
		<el-table
			:data="data"
			style="width: 100%;"
			border
			@row-click="showImg"
		>
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column prop="title" label="标题" width="150" align="center"></el-table-column>
			<el-table-column prop="description" label="内容" align="center"></el-table-column>
			<el-table-column prop="scanNumber" label="点赞量" align="center"></el-table-column>
			<el-table-column prop="commentNumber" label="评论量" align="center"></el-table-column>
			<el-table-column prop="commentNumber" label="分享量" align="center"></el-table-column>
			<el-table-column prop="category.name" label="所属分类" align="center"></el-table-column>
			<el-table-column prop="createDate" label="创建日期" align="center"></el-table-column>
			<el-table-column label="动态图片" width="180" align="center">
				<template slot-scope="scope">
					<el-image
						style="width: 100px;"
						:src="scope.row.thumb"
						fit="fill"
					></el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100" align="center">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editBlog(scope.row)"></el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini" circle @click="delBlog(scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			@pre-click="handlePreClick"
			@next-click="handleNextClick"
			:current-page="currentPage"
			:page-sizes="[5, 10, 20, 50]"
			:page-size="eachPage"
			layout="total, sizes, prev, pager, next, jumper"
			:total="count">
		</el-pagination>
	</div>
</template>

<script>
import {findBlog, delOneBlog} from '@/api/blog'
import {server_URL} from '@/urlConfig'
import {formatDate} from '@/utils/formatDate'

export default {
	name: 'blogList',
	data() {
		return {
			data: [],
			count: 0,
			currentPage: 1,
			eachPage: 10,
			totalPage: 1,
		}
	},
	created() {
		// this.fetchData()
		for (let i = 0; i < 10; i++) {
			this.data.push({
				id: i + 1,
				title: '标题' + i + 1,
				description: '内容' + i + 1,
				scanNumber: i + 1,
				commentNumber: i + 1,
				shareNumber: i + 1,
				category: {
					name: '分类' + i + 1
				},
				createDate: '2021-01-01',
				thumb: 'https://img1.baidu.com/it/u=2512661627,2584493883&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
			})
		}
	},
	methods: {
		fetchData() {
			findBlog(this.currentPage, this.eachPage).then(({data}) => {
				console.log('文章列表', data)
				this.data = data.rows
				this.count = data.total
				for (let i of this.data) {
					// i.thumb2 = server_URL + i.thumb
					i.createDate = formatDate(i.createDate)
				}
				this.totalPage = Math.ceil(this.count / this.eachPage)
				if (this.totalPage < this.currentPage) {
					this.currentPage = this.totalPage
					this.fetchData()
				}
			})
		},
		editBlog(row) {
			this.$router.push(`/editBlog/${row.id}`)
		},
		delBlog(row) {
			this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delOneBlog(row.id).then(res => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				})
			})
		},
		handleCurrentChange(val) {
			this.currentPage = val
			this.fetchData()
		},
		handleSizeChange(val) {
			this.eachPage = val
			this.currentPage = 1
			this.fetchData()
		},
		handlePreClick() {
			this.currentPage--
			this.fetchData()
		},
		handleNextClick() {
			this.currentPage++
			this.fetchData()
		},
		showImg(row) {
			//在该行下方显示图片
			this.$alert(`<img src="${row.imgUrl}" style="width:100%;height:100%;">`, '图片', {
				dangerouslyUseHTMLString: true,
				showConfirmButton: false,
				center: true
			})
		}
	}
}
</script>

<style scoped lang="scss">

</style>
